<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>添加收件地址</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			html,body{height: 100%;overflow: auto;}
			.mui-table-view{width: 7.5rem;/*margin-top: 1.1rem;*/}
			.mui-table-view:after,.mui-table-view:before{height: 0;}
			.mui-table-view-cell{width: 100%;height: 0.90rem;padding: 0 !important;position: relative;}
			.mui-table-view-cell label{float: left;font-size: 0.3rem;height: 0.90rem;width: 20%;text-align: center;line-height: 0.90rem;}
			.mui-table-view-cell input{float: right;margin: 0;border: none;font-size: 0.3rem;width: 80%;height: 100%;}
			.tx{width: 1.2rem;height:0.30rem;color: #117afd;position: absolute;right: 0;font-size: 0.28rem;top: 50%;margin-top: -0.15rem;}
			
			.mui-table-view-cell.mui-active{background-color: #fff;}
			.next{width: 6rem;height: 0.68rem;background: #117afd;font-size: 0.3rem;color: #fff;border: none;outline: none;border-radius: 0.1rem;margin: 0 auto;margin-top: 0.5rem;}
			/*.approve{margin-top: 0.3rem;padding-top: 0.33rem;width: 100%;height: 0.9rem;font-size: 0.26rem;color: #707070;padding-left:0.3rem;line-height: 0.33rem;background: #fff url(../../images/menu/ok1.png) no-repeat center;background-size: 0.26rem;background-position-y:0.33rem;background-position-x:6.8rem;}*/
			/*.active{margin-top: 0.3rem;padding-top: 0.33rem;width: 100%;height: 0.9rem;font-size: 0.26rem;color: #1592fc;padding-left:0.3rem;line-height: 0.33rem;background: #fff url(../../images/menu/ok.png) no-repeat center;background-size: 0.26rem;background-position-y:0.33rem;background-position-x:6.8rem;}*/
			.approve{background-color: #fff;margin-top:0.3rem;text-align: left;font-size: 0.3rem;line-height:0.9rem;text-indent: 0.3rem;}
			.mui-table-view-cell:after{left:0;}
		</style>
	</head>
	<body>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell hide" id="is_show">
		    	<label style="width: 100%;font-size: 0.3rem;color: #707070;">温馨提示：每个用户最多可以新增<font color="red">10</font>个地址 </label>
		    </li>
		    <li class="mui-table-view-cell">
		    	<label for="name">姓名：</label><input id="name" type="text" placeholder="姓名"/>
		    </li>
		    <li class="mui-table-view-cell">
		    	<label for="phone">手机：</label><input id="phone" type="text" placeholder="手机号码"/><!--<div class="tx">+通讯录</div>-->
		    </li>
		    <li class="mui-table-view-cell">
		    	<label for="add">地址：</label><input id="add" type="text" placeholder="收件地址"/>
		    </li>
		    <li class="mui-table-view-cell">
		    	<label for="email">邮箱：</label><input id="email" type="text" placeholder="电子邮箱"/>
		    </li>
		    <li class="mui-table-view-cell">
		    	<label for="tel">电话：</label><input id="tel" type="text" placeholder="固定电话"/>
		    </li>
		    <li class="mui-table-view-cell">
		    	<label for="num">别名：</label><input id="otherAddress" type="text" placeholder="填写常用地址别名"/>
		    </li>
		</ul>
		
		<div class="approve mui-table-view-cell">
			是否设为默认地址
			<div id="approve" class="mui-switch mui-switch-blue mui-switch-mini">
				<div class="mui-switch-handle"></div>
			</div>
		</div>
		<input type="hidden" id="mrFlag"/>
		<input type="hidden" id="addressId"/>
		<button class="next mui-btn mui-btn-primary" id="submitInfo">确定</button>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/common.js"></script>
	<script>	
		mui.plusReady(function() {
			var addressId = utils.getUrlParam('addressId');
			if(addressId == null || addressId == undefined || addressId == ''){
				$("#is_show").removeClass("hide");
			}
			//初始化修改地址页面
		    updateAddress();		
		});
		
		/**
		 * 初始化修改地址页面
		 */
		function updateAddress(){
			//获取上一个页面传过来的参数开始
			var addressId = utils.getUrlParam('addressId');
			var param = "oid="+addressId;
			utils.ajax('appHttpService/getAddressInfoById.do', function(data) {
			   data = JSON.parse(data);
			   if(data.code == '0'){
			   	var netUserAddress =  data.netUserAddress;
			   	document.getElementById('name').value = netUserAddress.addresseeName;
			   	document.getElementById('phone').value = netUserAddress.addresseePhone;
			   	document.getElementById('add').value = netUserAddress.addresseeAddress;	
			   	document.getElementById('email').value = netUserAddress.email;
			   	document.getElementById('tel').value = netUserAddress.tel;
			   	document.getElementById('otherAddress').value = netUserAddress.addresseeAddressAlias;
			    /**
			     * 是否是默认地址
			     */
			    var mrFlag = netUserAddress.defaultFlag;
			    if(mrFlag == '1'){//默认
				    //	$(".approve").addClass('active').html('已设为默认地址');
				    $('#approve').addClass('mui-active');
				    	document.getElementById('mrFlag').value = '1';
			    }else{
			    		document.getElementById('mrFlag').value = mrFlag;
			    }
			    //收件地址Id
			    document.getElementById('addressId').value = netUserAddress.oid;			   	
			   }
			}, param);
		 }
		
		/**
		 * 保存收件地址
		 */
		document.getElementById('submitInfo').addEventListener('tap', function() {
			//姓名
			var name = document.getElementById("name").value;
			//手机
			var phone =	document.getElementById('phone').value;
			//地址信息
			var add = document.getElementById('add').value;
			//默认标识
			var mrFlag = document.getElementById('mrFlag').value;
			//地址Id
			var addressId = document.getElementById('addressId').value;	
			//邮箱
			var email =	document.getElementById('email').value;
			//电话
			var tel = document.getElementById('tel').value;
			//别名
			var otherAddress = document.getElementById('otherAddress').value;
			
			if(name==null || name==""){
				mui.toast("请输入姓名");
				return false;
			}
			if(name.length > 50 ){
				mui.toast("姓名字数不得大于50!");
				return false;
			}
			
			if(phone==null || phone==""){
				mui.toast("请输入手机号码");
				return false;
			}
			
			if(!isMoible(phone)){
		    		mui.toast("请输入正确的手机号码!");
		    		return false;
		    }
			
//			if(email != null || email != ""){
//			   if(!isEmail(phone)){
//	    		  mui.toast("请输入正确的邮箱!");
//	    		  return false;
//		        }
//			}
			
			if(tel.length > 25 ){
				mui.toast("电话字数不得大于25!");
				return false;
			}
			
			if(add==null || add==""){
				mui.toast("请输入地址");
				return false;
			}
			
			if(add.length > 100 ){
				mui.toast("地址字数不得大于100!");
				return false;
			}
			
			if(otherAddress.length > 50 ){
				mui.toast("别名字数不得大于50!");
				return false;
			}
			
           	var param = 'userId='+ getUserId()+'&name='+name+'&phone='+phone+'&add='+add+'&mrFlag='+mrFlag+"&oid="+addressId+'&email='+email
           	             +'&tel='+tel+'&otherAddress='+otherAddress;
			utils.ajax('appHttpService/saveOrUpdateAddress.do', function(data) {
				data = JSON.parse(data);
				if(data.code == '0' || data.code == 0){//地址保存成功
					setTimeout(function() {//0.5秒后跳转到收件地址页面
		          		var param = 'userId=' + getUserId();
			          	var tempV = plus.webview.currentWebview();
						var lastView = plus.webview.currentWebview().opener();
						mui.fire(lastView,'addaddress');
						mui.back();
			          //showTemplates('addressLi.html','收件地址','../my/address.html?'+param);
		            }, 500);
				}else if(data.code == '2' || data.code == 2){//地址已达上限
					mui.toast(data.msg);
				}else if(data.code == '1' || data.code == 1){//地址保存失败
					mui.toast("保存失败");
					return;
				}
			}, param,{showWait:true});		  
		})
		
//		var approve = $('.approve');
//		approve.each(function(){
//			approve.hasClass('active');
//			$(this).click(function(){
//				if(!approve.hasClass('active')){
//					$(this).addClass('active').text('已设为默认地址');
//					//是否为默认地址标识
//					document.getElementById('mrFlag').value = '1';
//				}else{
//					$(this).removeClass('active').text('是否设为默认地址');
//					//非默认
//					document.getElementById('mrFlag').value = '0';
//				}
//			})
//		})	
		//圆角列表开关处理
		document.getElementById("approve").addEventListener('toggle',function (e) {
			var isActive = e.detail.isActive;
			if (isActive) {
				//$(this).addClass('active').text('已设为默认地址');
				//是否为默认地址标识
				document.getElementById('mrFlag').value = '1';
			} else {
				//$(this).removeClass('active').text('是否设为默认地址');
				//非默认
				document.getElementById('mrFlag').value = '0';
			}
		});
		
	</script>
</html>